<template>
  <div class="account">
    <div class="account_main">
      <div class="title">
        <div>Account</div>
        <span class="iconfont icon-shezhi"></span>
      </div>
      <div class="personal_msg">
        <img :src="data.head_portrait" alt="" />
        <div class="statistics">
          <div class="statistics_count">
            <div
              class="allCount_font"
              v-for="item in data.statistics_count"
              :key="item.id"
            >
              <div class="count_font">{{ item.count }}</div>
              <div class="count_font2">{{ item.item_name }}</div>
            </div>
          </div>
          <Button class="editBtn" type="primary" size="normal">Edit</Button>
        </div>
      </div>
      <div class="library">
        <div class="library_title">Library</div>
        <div class="library_list">
          <div
            v-for="item in data.library"
            :key="item.id"
            @click="haClick(item)"
          >
            <div class="library_list_item">
              <div class="item_css">
                <span class="iconfont icon_css" :class="item.icon"></span>
                <div class="item_name">{{ item.name }}</div>
              </div>
              <Icon name="arrow" />
            </div>
            <div class="line"></div>
          </div>
        </div>
      </div>
      <div class="recent_activity">
        <div>Recent Activity</div>
        <div class="img_font_scroll">
          <div class="img_font">
            <div v-for="(item, index) in data.recentList" :key="item.id">
              <img v-if="index % 2 === 0" :src="item.coverImgUrl" alt="" />
            </div>
            <div class="w24">
            </div>
          </div>
          <div class="img_font">
            <div v-for="(item, index) in data.recentList" :key="item.id">
              <img v-if="index % 2 === 1" :src="item.coverImgUrl" alt="" />
            </div>
            <div class="w24"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { Button, Icon } from "vant";
import headPortrait from "@/assets/images/search.jpg";
import { topPlaylist } from "@/apis/account/index.js"

const data = reactive({
  head_portrait: headPortrait,
  statistics_count: [
    {
      id: 2001,
      count: "22",
      item_name: "Playlist",
    },
    {
      id: 2002,
      count: "360k",
      item_name: "Follower",
    },
    {
      id: 2003,
      count: "56",
      item_name: "Following",
    },
  ],
  library: [
    {
      id: 3000,
      name: "My playlist",
      icon: "icon-musicbox",
    },
    {
      id: 3001,
      name: "Album",
      icon: "icon-album",
    },
    {
      id: 3002,
      name: "MV",
      icon: "icon-play-square",
    },
    {
      id: 3003,
      name: "Artist",
      icon: "icon-icon-safe-bluefuben",
    },
    {
      id: 3004,
      name: "Download",
      icon: "icon-xiazai",
    },
  ],
  recentList: [],
});
const router = useRouter();
// 获取用户信息  存储在local中
const profile =JSON.parse(localStorage.getItem('profile')) 
// console.log(profile)
// data.head_portrait = profile.avatarUrl
// 热门播放列表
const topPlaylistHttps = async ()=>{
  let params = {
    order:"hot",
    limit:30,
    cat:'华语'
  }
  const res = await topPlaylist(params)
  data.recentList = res.playlists
  // console.log(res)
}
topPlaylistHttps()
const haClick = (item) => {
  if (item.id === 3004) return;
  // 跳转的时候用的是 router 方法的类
  router.push({
    path: "/Library_home",
    query: { name: item.name, id: item.id },
  });
};
</script>

<style lang="less" scoped>
.account {
  width: 100%;
  min-height: 100vh;
  font-family: AppleSystemUIFont;
  color: #eeeeee;
  background-color: #0E0B1F;
  padding-bottom: 40px;
  &_bg {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
    }
  }
  &_main {
    width: 100%;
    
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;
      div {
        font-size: 48px;
        line-height: 56px;
        margin-left: 24px;
      }
      .icon-shezhi {
        margin-right: 27px;
        font-size: 20px;
      }
    }
    .personal_msg {
      width: 327px;
      margin: 0 auto;
      margin-top: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 79px;
        height: 80px;
      }
      .statistics {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-left: 36px;
        &_count {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .allCount_font {
            color: #eeeeee;
            font-size: 16px;
            text-align: center;
            line-height: 20px;
            .count_font2 {
              font-size: 14px;
              margin-top: 4px;
            }
          }
        }
        .editBtn {
          width: 78px;
          height: 28px;
          background: #cbfb5e;
          box-shadow: 2px 2px 3px 0px rgba(169, 169, 169, 0.3);
          border-radius: 4px;
          margin-top: 15px;
          border: none;
        }
      }
    }
    .library {
      .library_title {
        font-size: 22px;
        line-height: 26px;
        margin-top: 32px;
        margin-left: 24px;
        margin-bottom: 26px;
      }
      .library_list {
        width: 327px;
        margin: 0 auto;

        &_item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
          .item_css {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon_css {
              font-size: 20px;
            }
            .item_name {
              font-size: 14px;
              margin-left: 22px;
            }
          }
        }
        .line {
          height: 1px;
          background: #ffffff;
          opacity: 0.2;
          margin-top: 20px;
        }
      }
    }
    .recent_activity {
      height: 26px;
      margin-top: 40px;
      font-size: 22px;
      line-height: 26px;
      margin-left: 24px;
      .img_font_scroll {
        width: 100%;
        box-sizing: border-box;
        overflow: scroll;
        margin-top: 20px;
      }
      .img_font {
        height: 108px;
        display: flex;
        padding-right: 24px;
        // justify-content: space-between;
        img {
          width: 88px;
          height: 88px;
          border-radius: 4px;
          margin-left: 16px;
        }
      }
      .w24{
        //flex-shrink:0;//空间不够是否缩小 默认1
        //flex-basis: 24px;//占据主轴的空间大小
         flex: 0 0 24px; //!优先使用这个属性
      }
    }
  }
}
</style>
<style lang="less" scoped>
.account .statistics .van-button--primary {
  color: #20242f;
}
.account .library .van-icon-arrow {
  margin-right: 8px;
}
</style>
